@extends('common.body')

@section("content")

    <div class="container clear">
        <div class="top_recommend_box">
            <div class="top_recommend">
                <h3>热门推荐</h3>
                <div class="recommend_list">
                    <!--全部后台推荐,配置对应的合适的推荐方式-->
                    @foreach( \App\Models\Article::orderby("hits")->orderBy("created_at")->limit(12)->get() as $article)
                        @if ($loop->first)
                        <div class="recommend_list_b">
                            <a href="{{ route('article.detail',['id'=> $article->id]) }}">{{ $article->title }}</a>
                        </div>
                        @endif
                            <li><a href="{{ route('article.detail',['id'=> $article->id]) }}">{{ $article->title }}</a></li>
                    @endforeach
                </div>
            </div>

        </div>
        <div class="top_slide">
            <div class="swiper-container">
                @include('common.banner',['locationId'=>1])

                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>

        </div>
        @foreach ($channels as $children)
        <div class="normal-title clear">
            <h3>{{ $children['title'] }}</h3>
        </div>


        <div class="article-title clear">
            <li class="a-t-Selected"><a href="#"  channel="{{ $children['id'] }}" pid="{{ $children['id'] }}"><span class="autoclick">最新文章</span></a></li>
            @isset($children['children'])
            @foreach ($children['children'] as $channel)
                <li class="">
                    <a href="" channel="{{ $channel['id'] }}" pid="{{ $channel['pid'] }}">
                        {{ $channel['title'] }}
                    </a>
                </li>
            @endforeach
            @endisset
        </div>

        <!-- 能否用ajax加载 -->
        <article class="article clear" id="a{{$children['id']}}">
        </article>
        @endforeach

    </div>

    <div class="container clear">

        <div class="normal-title clear">
            <h3>情感社区</h3>
        </div>
        <article class="index_ask clear">
            <div class="index_ask_left clear">
                <div class="index_ask_list">
                    <h5><a href="" class="ask_title">如何去经营这段婚姻，才不会再一次被背叛？</a><a href="" class="ask_data">5个回答</a> <a href="" class="ask_data">8个有帮助</a></h5>
                    <div class="head"><img src="images/a_1.jpg"></div><div class="index_ask_content">这是我过去最擅长处理案例的种类之一。针对你的情况，也许身边会有很多人给你出各种各样的馊主意...</div>
                </div>
                <div class="index_ask_list">
                    <h5><a href="" class="ask_title">没有了爱情，是不是应该结束这段婚姻？</a><a href="" class="ask_data">41个回答</a> <a href="" class="ask_data">0个有帮助</a></h5>
                    <div class="head"><img src="images/a_2.jpg"></div><div class="index_ask_content">我很喜欢你的故事，也很喜欢在这个故事里，你们双方所呈现出来的互相讨论的氛围...</div>
                </div>
                <div class="index_ask_list">
                    <h5><a href="" class="ask_title">如何平衡夫妻关系，不为钱生气，才能使关系更好？</a><a href="" class="ask_data">15个回答</a> <a href="" class="ask_data">5个有帮助</a></h5>
                    <div class="head"><img src="images/a_3.png"></div><div class="index_ask_content">给楼主一个拥抱！能够理解楼主内心的焦虑不安，楼主还是一个处于即将成年的学生，还是一个女孩儿，内心对于挫折压力</div>
                </div>
                <div class="index_ask_list">
                    <h5><a href="" class="ask_title">老婆希望二胎还是用她的姓，该怎么办?</a><a href="" class="ask_data">25个回答</a> <a href="" class="ask_data">1个有帮助</a></h5>
                    <div class="head"><img src="images/a_4.png"></div><div class="index_ask_content">事实上，你和老婆在孩子姓氏的问题上产生矛盾，主要原因在于你们的心态出了问题。你们以女财男貌的模式进入这段婚姻...</div>
                </div>
                <div class="index_ask_list">
                    <h5><a href="" class="ask_title">不想在婚姻中变成怨妇 该怎么改变内心的不自信</a><a href="" class="ask_data">23个回答</a> <a href="" class="ask_data">1个有帮助</a></h5>
                    <div class="head"><img src="images/a_5.png"></div><div class="index_ask_content">面对老公的上进心，你之所以有不自信的焦虑情绪，是由于你本来就因为无法应对各种挑战而倍感压力...</div>
                </div>
                <div class="index_ask_list">
                    <h5><a href="" class="ask_title">如何扭转长达三年的相处模式，不再要求我付出物质？</a><a href="" class="ask_data">15个回答</a> <a href="" class="ask_data">2个有帮助</a></h5>
                    <div class="head"><img src="images/a_6.png"></div><div class="index_ask_content">古往今来，圣母都会被送上祭坛和绞架，并且得到他人的歌颂。而圣母病患者的特点反映到感情生活中，就是以身饲虎付出一切...</div>
                </div>

            </div>

            <div class="index_ask_right">
                <h3>本月精华问答</h3>
                <li><a href="">习得性无助，如何克服心理障碍把小说写完？</a><p>35个回答</p></li>
                <li><a href="">22岁男生，脾气太大，太急怎么办？</a><p>25个回答</p></li>
                <li><a href="">正念疗法与认知行为疗法，是否相违背？</a><p>16个回答</p></li>
                <li><a href="">相处三年，现闹分手，我不知该咋办？</a><p>14个回答</p></li>
                <li><a href="">男朋友和女闺蜜去旅游，被我压迫后说累了想分手，我该怎么办？</a><p>6个回答</p></li>
                <li><a href="">男友父母很强势，我不想被直接安排，该怎办？</a><p>3个回答</p></li>

            </div>
        </article>
    </div>
@endsection

@section("script")
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            effect : 'fade',
            loop: true, // 循环模式选项
            autoplay:true,
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable:true
            },
        })

    </script>
    <script type="text/javascript">
        $(function(){
            $(".autoclick").trigger("click");
            $(".article").show();
        });
        //$(".article:first").addClass("a-t-Selected");
        // 根据class获取当前的tab
        $(".article-title li").click(function(){
                var activeTab = $(this).find("a").attr("channel");
                var pid =  $(this).find("a").attr("pid");
                $("#a"+pid+" li").removeClass("a-t-Selected");
                $(this).siblings().removeClass("a-t-Selected");
                $(this).addClass("a-t-Selected");
                articleList(activeTab, pid)
                return false;
            }
        )
        function articleList(activeTab, pid){
            url = '{{ route("/") }}/articlec?c='+activeTab
            $.ajax({
                "url":url,
                "method":"get",
                "success":function (data){
                    $("#a"+pid).html("")
                    $("#a"+pid).append(data)
                }
            })
        }
    </script>
@endsection
